<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        .star{
            color: red;
            font-weight: bold;
        }

        .word{
            text-align: right;
        }
    </style>

    <script type="text/javascript">

        window.onload = function (){

            //初始化省市下拉列表二级联动
            getCity();
            //验证用户名和密码
            var usernameRes = validUsername();
            var passwordRes = validPassword();


            //获取form对象，符合条件时提交
            var myForm = document.getElementById("myForm");

            myForm.onsubmit = function (){
                alert(111);
                if(usernameRes && passwordRes){
                    return true;
                }else{
                    return false;
                }
            }
        }

        //验证用户名
        function validUsername(){

            var boo = true;

            var pattern = /\w+/;

            var username = document.getElementById("username");
            var message = document.getElementById("message");

            username.oninput = function (){
                //通过节点对象获取value属性值
                if (username.value.length < 8) {
                    message.innerHTML = "长度不足8位".fontcolor("red");
                    boo = false;
                }else{
                    //如果长度通过判断是否有数字或字母
                    if (pattern.test(username.value)) {
                        message.innerHTML = "通过".fontcolor("green");
                    }else{
                        message.innerHTML = "必须有数字或字母".fontcolor("red");
                        boo = false;
                    }
                }
            }
            return boo;
        }


        function validPassword(){
            var password = document.getElementById("password");
            var ensurePassword = document.getElementById("ensurePassword");
            var passMessage = document.getElementById("passMessage");

            //确认密码绑定失去焦点事件
            ensurePassword.onblur = function (){
                if(password.value === ensurePassword.value){
                    passMessage.innerHTML = "通过".fontcolor("green");
                    return true;
                }else{
                    passMessage.innerHTML = "两次密码不一致".fontcolor("red");
                    return false;
                }
            }

        }

        function getCity(){

            //初始化省市的值
            var provinces = ["黑龙江","辽宁","吉林"]
            var cities = [["哈尔滨","齐齐哈尔","大庆"],["沈阳","大连","本溪"],["长春","四平","德惠"]]

            //获取省和市的元素节点对象
            var province = document.getElementById("province");
            var city = document.getElementById("city");

            //初始化最开始的两个下拉框
            province[0] = new Option("--请选择--",0);
            city[0] = new Option("--请选择--",0);

            //遍历所有的省份，添加到省份的下拉列表中
            for(var i in provinces){
                //因为 请选择 已经占有了一个位置，其他省份需要从位置为1开始添加
                province[parseInt(i)+1] = new Option(provinces[i],parseInt(i)+1)
            }

            //如果省份内容发生变化，需要绑定 onchange 事件
            province.onchange = function (){

                city.length = 0;

                //获取省份的索引，作为城市的数组索引
                var cityIndex = province.value;

                //如果省份选择的是第0个位置 即 --请选择-- 此时的城市也得显示这个
                if(cityIndex == 0){
                    city[0] = new Option("--请选择--",0);
                }else{
                    //获取到相应省份对应的城市数组
                    var cityOption = cities[cityIndex-1];
                    for(var i in cityOption){
                        city[i] = new Option(cityOption[i],i);
                    }
                }
            }

        }

    </script>
</head>
<body>

    <center>
        <form id="myForm">
            <table>
                <tr>
                    <td class="word">
                        您想要的用户名：<span class="star">*</span>
                    </td>
                    <td>
                        <input type="text" id="username" required/>
                        <span id="message"></span>
                    </td>
                </tr>
                <tr>
                    <td class="word">
                        您的性别：<span class="star">*</span>
                    </td>
                    <td>
                        <input type="radio" name="gender" value="男" checked />男
                        <input type="radio" name="gender" value="女"/>女
                    </td>
                </tr>
                <tr>
                    <td class="word">
                        您来自：<span class="star">*</span>
                    </td>
                    <td>
                        <select id="province"></select>省
                        <select id="city"></select>市
                    </td>
                </tr>
                <tr>
                    <td class="word">
                        提示问题：<span class="star">*</span>
                    </td>
                    <td>
                        <select id="question">
                            <option>你初中同桌的名字?</option>
                            <option>你高中同桌的名字?</option>
                            <option>你父亲的名字?</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="word">
                        答案名：<span class="star">*</span>
                    </td>
                    <td>
                        <input type="text" id="answer" required/>
                    </td>
                </tr>
                <tr>
                    <td class="word">
                        电子邮件地址：<span class="star">*</span>
                    </td>
                    <td>
                        <input type="email" id="email" required/>
                    </td>
                </tr>
                <tr>
                    <td class="word">
                        设置密码：<span class="star">*</span>
                    </td>
                    <td>
                        <input type="password" id="password" required/>
                    </td>
                </tr>
                <tr>
                    <td class="word">
                        再次确认密码：<span class="star">*</span>
                    </td>
                    <td>
                        <input type="password" id="ensurePassword" required/>
                        <span id="passMessage"></span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" id="sub" value="同意以上服务条款，提交注册信息"/>
                    </td>
                </tr>
            </table>
        </form>
    </center>

</body>
</html>